<template>
    <div ref="chart" style="width: 450px; height: 380px; background-color: white;"></div>
  </template>
  
  <script setup>
  import { onMounted, ref, onBeforeUnmount } from 'vue';
  import * as echarts from 'echarts';
  
  const chart = ref(null);
  
  const initChart = () => {
    const myChart = echarts.init(chart.value);
  
    const option = {
      title: {
        text: '维修汇总分析',
        subtext: '2024年',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '维修分类',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 335, name: '设备更换' },
            { value: 310, name: '硬件维修' },
            { value: 234, name: '操作维护' },
            { value: 135, name: '线路维修' },
            { value: 1548, name: '设备巡检' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
  
    myChart.setOption(option);
  };
  
  onMounted(() => {
    initChart();
  });
  
  onBeforeUnmount(() => {
    echarts.dispose(chart.value);
  });
  </script>
  
  <style scoped>
  /* 可以添加样式来美化图表 */
  </style>
  